<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/003main.css">
    <title>Document</title>
    <script type="text/javascript">
        // 请按照给定的布局制作倒计时效果
        window.onload = function () {
            // 获取div对象
            var oDay = document.getElementById("day");
            var oHour = document.getElementById("hour");
            var oMinute = document.getElementById("minute");
            var oSecond = document.getElementById("second");
            // 定时器一秒执行一次
            var oTimer=setInterval(updateExe, 1000);
            // update显示时间
            function update(day, hour, minute, second) {
                // 判断倒计时没有结束时才能做进行倒计时
                var day_val = day.innerText
                var hour_val = hour.innerText
                var min_val = minute.innerText
                var sec_val = second.innerText
                if (~(day_val == '00' && hour_val == '00' && min_val == '00' && sec_val == '00')) {
                    // 判断秒是否为0，不为0减1，否则判断是否都为0，都为0结束，否则改为59
                    if (sec_val != "00") {
                        // 判断秒的个位是否为0，不为0个位减1，否则改为9,十位减1；
                        second.innerText = changeOutput(sec_val);
                    }
                    else {
                        if (day_val == '00' && hour_val == '00' && min_val == '00' && sec_val == '00') {
                            alert('time is over!');
                            clearInterval(oTimer);
                        }
                        else {
                            second.innerText = "59";
                            // 判断分钟是否为0，不为0减1，否则改为59;
                            if (min_val != "00") {
                                minute.innerText = changeOutput(min_val);
                            }
                            else {
                                minute.innerText = "59";
                                // 判断小时是否为0，不为0减1，否则改为23;
                                if (hour_val != "00") {
                                    hour.innerText = changeOutput(hour_val);
                                }
                                else {
                                    hour.innerText = "23";
                                    // 判断天是否为0，不为0减1，否则不操作;
                                    if (day_val != "00") {
                                        day.innerText = changeOutput(day_val);
                                    }
                                }
                            }
                        }
                    }
                }
            }
            function changeOutput(sTr) {
                var val_0 = sTr.substring(1, 2); //个位
                // alert(val_0)
                var val_1 = sTr.substring(0, 1); //十位
                // alert(val_1)
                // 判断个位是否为0，不为0个位减1
                if (val_0 != 0) {
                    val_0 -= 1;
                }
                else {
                    val_1 -= 1;
                    val_0 = '9';
                }
                return val_1 + val_0;
            }
            // 执行update操作
            function updateExe() {
                update(oDay, oHour, oMinute, oSecond);
            }
        }
    </script>
</head>

<body>
    <div class="time_left_bg">
        <div class="showday" id="day">09</div>
        <div class="showhour" id="hour">09</div>
        <div class="showminute" id="minute">09</div>
        <div class="showsecond" id="second">09</div>
    </div>
</body>

</html>